<template>
  <div class="plat_box">
    <div class="title">
      <span>平台概况视图</span>
    </div>

    <div class="box">

    </div>
  </div>
</template>

<script>
import Echarts from "@/components/Public/Echarts.vue";
import BlockItem from "@/components/Plat/BlockItem.vue";
export default {
  components: {
    Echarts,
    BlockItem
  },
  data() {
    return {
      option: {
        title: {
          text: "磁盘使用率",
          left: "50%",
          bottom: "40px",
          textAlign: "center",
          textStyle: {
            color: "#fff",
            fontSize: 18,
            width: "100%"
          }
        },
        tooltip: {
          formatter: "{c}%"
        },
        toolbox: {
          feature: {
            restore: {},
            saveAsImage: {}
          }
        },
        series: [
          {
            name: "CPU占用率",
            type: "gauge",
            detail: { formatter: "{value}%" },
            data: [
              {
                value: 50,
              }
            ],
            pointer: {
              width: 5, //指针的宽度
              length: "60%" //指针长度，按照半圆半径的百分比
            },
            axisLine: {
              lineStyle: {
                color: [[0.2, "#00CED1"], [0.8, "#1E90FF"], [1, "#3963bc"]]
              }
            }
          }
        ],
        color: ["#ca8622", "#bda29a", "#6e7074"]
      }
    };
  }
};
</script>

<style lang="less" scoped>
.plat_box {
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title {
  display: flex;
  justify-content: center;
  span {
    font-size: 22px;
  }
}
.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
}
.item_title {
  color: #162d5f;
}
</style>

